<template>
	<view class="uni-pages">
		<z-paging ref="paging" v-model="dataList" @query="queryList" @scroll="debouncedScroll">
			<template slot="top">
				<view class="" id="topFixedBarId">
					<u-navbar :borderBottom="false" :height="50" :isFixed="false" :is-back="false"
						back-icon-color="#ffffff" title-color="#ffffff" :background="background">
						<view class="font-16 text-white flex justify-between align-center padding-lr-sm"
							style="width: 100%;">
							<view class="font-22">山西药九九<text class="cuIcon-right"></text></view>
							<view><text class="cuIcon-scan"></text></view>
						</view>
					</u-navbar>
					<view class="arc-parent">

						<view class="padding">
							<view
								class="bg-thema-grey border-radius-10 width-100 flex justify-between align-center text-searsh font-16 padding-lr"
								style="height: 72rpx;">
								<text class="cuIcon-search"></text>
								<input style="border: none;height: 70rpx;"
									class="font-16 text-searsh flex-1 padding-left-sm"
									placeholder-style="color:rgba(235,235,245,0.6)" placeholder="搜商品" />
							</view>

							<view
								class="bg-thema-grey border-radius-10 width-100 flex justify-between align-center text-white font-16 padding-lr margin-top-sm"
								style="height: 102rpx;">
								请选择报计划客户
								<text class="cuIcon-right text-searsh"></text>
							</view>
						</view>
					</view>

				</view>
			</template>
			<view class="container">
				<view class="arc-parent">
					<view class="padding bg-thema-black" style="position: relative;">
						<view style="height: 15px;"></view>
						<view
							style="position: absolute;bottom: -180rpx;z-index: 7;width: calc(100% - 60rpx);box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40rpx;"
							class="border-radius-10 bg-white">
							<view class=" flex justify-between ">
								<view class="padding-xs">
									<image src="/static/icon/yinpin.png" style="width: 200rpx;height: 200rpx;">
									</image>

								</view>
								<view class="padding flex-1 flex-column text-666 font-16">
									<view>添加 <text class="text-333 margin-left-sm font-weight-blod"> 我的客户</text>，</view>
									<view class="margin-top-xs">系统将为你准确计算销售数据。</view>

								</view>
								<view
									class="bg-main-yellow padding flex-column align-center justify-start font-18 goAdd">
									去添加
								</view>
							</view>
						</view>
					</view>
					<view class="bg-white padding-bottom-lg" style="padding-top: 200rpx;">
						<view class="flex justify-around align-center">
							<view class="flex-column align-center justify-center font-16 text-666">
								<view>
									<image src="/static/icon/yinpin.png" style="width: 160rpx;height: 160rpx;">
									</image>
								</view>
								<view>我的客户</view>
							</view>

							<view class="flex-column align-center justify-center font-16 text-666">
								<view>
									<image src="/static/icon/yinpin.png" style="width: 160rpx;height: 160rpx;">
									</image>
								</view>
								<view>我的客户</view>
							</view>

							<view class="flex-column align-center justify-center font-16 text-666">
								<view>
									<image src="/static/icon/yinpin.png" style="width: 160rpx;height: 160rpx;">
									</image>
								</view>
								<view>我的客户</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 标题栏 -->
					<view class="header margin-top-sm">
						<text class="title">我的品种</text>
					</view>

					<!-- 分类导航 -->
				<view class="filter-nav" id="filter-nav">
					<!-- <view class="filter-item active">综合<text class="cuIcon-triangledownfill"></text></view>
						<view class="filter-item">分类<text class="cuIcon-triangledownfill"></text></view>
						<view class="filter-item">全部</view> -->
					<home-filter-bar ref="homeFilterBar1" :height="inter" @selectChange="selectChange"
						@scrollIntoViewById="scrollIntoViewById" :canClick="false" :value1Init="selectValue.value1"
						:value2Init="selectValue.value2" :value3Init="selectValue.value3"></home-filter-bar>
				</view>

				<shop-list :dataList="dataList" @gotoDetail="gotoDetail" @showPopAddShop="showPopAddShop"></shop-list>


			</view>
		</z-paging>
		<alert-add-shop ref="alertAddShop"></alert-add-shop>
		<home-filter-bar :style="{top:`${topFixedBarFrame&&topFixedBarFrame.bottom?topFixedBarFrame.bottom-1:-1}px`}"
			class="homeFilterBarFix" ref="homeFilterBar" v-show="homeFilterBarFix_show" :height="inter"
			@selectChange="selectChange"></home-filter-bar>



	</view>
</template>

<script>
	import {
		accAdd,
		formatNumber
	} from '../../common/utils.js'
	import frameMixin from "@/mixins/frame.mixin.js"

	export default {
		mixins: [frameMixin],
		data() {
			return {
				dataList: [],
				background: {
					backgroundColor: "#1D2743"
				},
				selectValue: {
					value1: 0,
					value2: 0,
					value3: false
				},
				homeFilterBarFrame: 0,
				topFixedBarFrame: 0,
				homeFilterBarFrameCurrent: 0,
				topFixedBarFrameCurrent: 0,
				scrollTop: 0,
				inter: 0,
				debouncedScroll: null,
			}
		},
		computed: {
			homeFilterBarFix_show() {
				if (this.homeFilterBarFrame?.height) {
					let inter = this.homeFilterBarFrame.top - (this.topFixedBarFrame?.bottom || 0) - 1;
					console.log("inter高度====》", inter)
					this.inter = this.topFixedBarFrame?.bottom
					return this.scrollTop > inter
				}
			},
		},

		onShow() {
			console.log("onshow======================>", this.loadFlag)
			if (this.loadFlag) {
				console.log("onshow刷新")
				this.refreshList()
			}
		},
		async onLoad() {


		},
		onUnload() {
		},
		
		created() {
			console.log("我进入created了")
		    // 预绑定 this（可选）
		    this.debouncedScroll = this.debounce(this.handleScroll, 10);
		  },
		onReady() {
			this.loadHomeFilterBarIdReact("first")
		},
		beforeDestroy() {
		},
		methods: {
			// 防抖函数（普通函数）
			debounce(fn, delay = 300) {
				let timer = null;
				return function(...args) {
					clearTimeout(timer);
					timer = setTimeout(() => {
						fn.apply(this, args); // 通过 apply 保持 this 指向
					}, delay);
				};
			},
			selectChange(data) {
				console.log("筛选发生变化", data)
				let index = data.index
				if (index == 1) {
					this.selectValue.value1 = data.value
				}
				if (index == 2) {
					this.selectValue.value2 = data.value

				}
				if (index == 3) {
					this.selectValue.value3 = data.value

				}
				this.$refs.homeFilterBar1.handleValue(data)
			},
			loadHomeFilterBarIdReact(type) {
				let homeFilterBar = uni.createSelectorQuery().in(this).select(`#filter-nav`);
				if (homeFilterBar) {
					homeFilterBar.boundingClientRect(rect => {
						console.log(rect)
						if (type == "first") {
							this.homeFilterBarFrame = rect
						}
						this.homeFilterBarFrameCurrent = rect
					}).exec()
				}
				let topFixedBar = uni.createSelectorQuery().in(this).select(`#topFixedBarId`);
				if (topFixedBar) {
					topFixedBar.boundingClientRect(rect => {
						console.log(rect)
						if (type == "first") {
							this.topFixedBarFrame = rect
						}
						this.topFixedBarFrameCurrent = rect
					}).exec()
				}

			},
			gotoDetail(item) {
				uni.navigateTo({
					url: '/pages/zyt/detail?id=' + item.id
				})
			},

			showPopAddShop(type) {
				this.$refs.alertAddShop.showPopAddShop(type)
			},
			handleScroll(e) {
				this.scrollTop = e.detail.scrollTop;
				// this.debounce(function() {
				// 	this.scrollTop = e.detail.scrollTop;
				// }, 100).call(this); // 显式绑定 this
			},
			scrollIntoViewById(index) {
				this.loadHomeFilterBarIdReact()
				console.log(111)
				this.$refs.paging.scrollIntoViewByNodeTop(this.homeFilterBarFrameCurrent.top - (this
					.topFixedBarFrameCurrent?.bottom ||
					0), 0, true)
				//选中打开第一个标签
				this.$nextTick(() => {
					if (index == 3) {
						this.$refs.homeFilterBar.change3()
						return
					}
					this.$refs.homeFilterBar.selectTab(index)


				})
			},
			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
			async queryList(pageNo, pageSize) {
				console.log(pageNo, pageSize)
				console.log("判断是否登录", this.isLogin)
				if (pageNo == 1) {
					let res = [{
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}]
					this.$refs.paging.complete(res)

				} else {
					this.$refs.paging.complete([])
				}
				// if (!this.isLogin) {
				// 	this.$refs.paging.complete(false);
				// 	return;
				// }
				// try {
				// 	let data = await this.$http.post(this.$api.edu.getOnlineCourseSelectionList, {
				// 		key: this.dataForm.key,
				// 		studyId: this.dataForm.studyId ? this.dataForm.studyId : -1,
				// 	})
				// 	this.$refs.paging.complete(data.list)
				// } catch (e) {
				// 	this.$refs.paging.complete([]);
				// }

			},

		}
	}
</script>

<style scoped lang="scss">
	.homeFilterBarFix {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
	}


	.header {
		padding: 20rpx 30rpx;
		background-color: #fff;

		.title {
			color: #333;
			font-size: 40rpx;
		}
	}




	/* 样式修改 */
	.arc-parent {
		position: relative;
		background-color: #1D2743;
		/* 与导航栏背景色一致 */
	}

	.bg-thema-black {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 50%;
			bottom: -45px;
			width: 100%;
			height: 90px;
			background: #1D2743;
			border-radius: 50%;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
			z-index: 0;
		}
	}

	.uni-pages {
		height: 100vh;
		background-color: #F6F6F6;
	}

	.text-searsh {
		//60%
		color: rgba(235, 235, 245, 0.6);
	}

	.goAdd {
		writing-mode: vertical-rl;
		text-orientation: upright;
		border-radius: 0 20rpx 20rpx 0;

	}
</style>